<template>
  <div id="app"  :class="{unSelected:isUnSelect}">
    <div class="left-panel">
      <MineTitle/>
      <div class="box">
        <IndexList/>
        <RoadPanel/>
      </div>
    </div>
    <div class="right-panel">
      <MapTitle/>
      <MapContainer/>
      <DiagramContainer/>
    </div>
    <div class="mask" v-if="isPopupShow"></div>
  </div>
</template>

<script>
  import MineTitle from './components/MineTitle'
  import IndexList from './components/IndexContainer'
  import RoadPanel from './components/RoadPanel'
  import MapTitle from './components/MapTitle'
  import MapContainer from './components/MapContainer'
  import DiagramContainer from './components/DiagramContainer'
  import eventBus from './util/event-bus';
  export default {
    name: 'App',
    data () {
      return {
        isUnSelect:false,
        isPopupShow:false,
      }
    },
    mounted(){
      eventBus.$on("DragStart",() => {
        this.isUnSelect = true;
      });
      eventBus.$on("DragStop",() => {
        this.isUnSelect = false;
      });
      eventBus.$on("updatePopup", (bool) => {
          this.isPopupShow = bool;
      });
    },
    components:{
      MineTitle,
      IndexList,
      RoadPanel,
      MapTitle,
      MapContainer,
      DiagramContainer,
    },
    computed:{

    },
    methods:{
    },
    watch:{

    }
  }
</script>

<style scoped lang="scss">
  @import "./common/common.scss";
  #app {
    @include resetHtml;
    font-family:Microsoft YaHei, 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
     color: $font-normal;
    overflow: hidden;
//    @include clearfix;
    &.unSelected{
      -moz-user-select: none; -khtml-user-select: none; user-select: none;
    }
    .left-panel {
      width: $sidebar-width;
      float: left;
      height: 100%;
      .box{
        height: calc(100% - 60px);
//        @include clearfix;
      }
    }
    .right-panel {
      width: calc(100% - 600px);
      float: left;
      height: 100%;
    }
    .mask{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 900;
      background: rgba(0,0,0,0.4);
    }
  }
</style>
